<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/10/26
  Time: 8:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    application.setAttribute("path",path);
%>
<!-- 右侧操作工具栏的html模板  用id绑定-->
<script type="text/html" id="toolBar">
    <!-- 通过 lay-event 绑定按钮对应的工具条事件 -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<html>
<head>
    <title>员工分页列表页</title>
    <!-- 引入layui.css--->
    <link rel="stylesheet" href="${path}/layui/css/layui.css">
    <!---引入layui.js-->
    <script src="${path}/layui/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <div>
        <a class="layui-btn" id="addBtn">新增</a>

        <span style="float: none;">
            <div class="layui-inline">员工名称：</div>
            <div class="layui-inline">
                <input name="eName" id="eName" type="text" class="layui-input" />
            </div>
            <div class="layui-inline">工作岗位：</div>
            <div class="layui-inline">
                <input name="job" id="job" type="text" class="layui-input" />
            </div>
            <div class="layui-inline">经理姓名：</div>
            <div class="layui-inline">
                <input name="mgrName" id="mgrName" type="text" class="layui-input" />
            </div>
            <div class="layui-inline">部门名称：</div>
            <div class="layui-inline">
                <input name="dName" id="dName" type="text" class="layui-input" />
            </div>
            <a class="layui-btn" id="search">搜索</a>
        </span>
    </div>

    <div id="layer-photos-demo">
        <table class="layui-table" id="dataTable" lay-filter="tableDemo"></table>
    </div>
</div>

</body>
<script>
    var util,table,$,layer;
    //渲染表格
    layui.use(['table','jquery','util','layer'],function(){
        table = layui.table;
        $ = layui.jquery;
        util = layui.util;
        layer = layui.layer;
        //将整个数据表格定义为一个对象
        var tableIns = table.render({
            //使用 属性：值 的形式，给表格渲染设置数据和形式
            elem : '#dataTable',  //要渲染的表格元素
            url :  '${path}/emp/list2',      //数据接口url 异步请求，要求返回的数据为json格式
            cols : [[
                {field: 'EMPNO',title: '员工列表',width:86},
                {field: 'ENAME',title: '员工姓名',width:100},
                {field: 'FACE',title: '头像',width:60,templet:function(d){
                    return '<img class="images" style="width:50px;height:50px" layer-src="${path}' + d.FACE + '" ' +
                        'src="${path}'+ d.FACE + '">'
                    }},
                {field: 'JOB',title: '工作岗位',width:130},
                {field: 'MGR',title: '经理编号',width:86},
                {field: 'MGRNAME',title: '经理姓名',width:86},
                {field: 'HIREDATE',title: '入职时间',width:130,templet:function(d){
                        if(d.HIREDATE == null){
                            return '';
                        }else{
                            return util.toDateString(d.HIREDATE,'yyyy年MM月dd日');
                        }
                    }},
                {field: 'SAL',title: '工资',width:86,sort:true,
                    templet:function(d){  //d代表当前行的整个对象
                        if(d.SAL == null){
                            return '￥0';
                        }
                        return '￥' + d.SAL;
                    }},
                {field: 'COMM',title: '奖金',width:86,sort:true,
                    templet:function(d){  //d代表当前行的整个对象
                        if(d.COMM == null){
                            return '￥0';
                        }
                        return '￥' + d.COMM;
                    }},
                {field: 'DNAME',title: '部门名称',width:86},
                //工具条列，单独设定
                {fixed:'right' , title : '操作',toolbar: '#toolBar'}
            ]],              //设置表头
            page : true,     //开启分页功能
            limit : 10,//默认每页显示10条
            limits : [10,20,30,50,100], //可供每页显示数的选项
            method : 'post',
            loading : true ,//立即加载
            done : function(res,curr,count){  //数据渲染完毕后的回调函数
                layer.msg("当前表格数据渲染完毕，开始执行回调函数！");
                //res代表异步请求列表，响应回来的整个json对象
                console.log(res);
                //开启图片弹层
                layer.photos({
                    photos: '#layer-photos-demo',   //图片弹层的容器
                    anim:3     //动画效果的类型  0~6
                });
            }
        });



        //表格开启工具条事件监听
        table.on('tool(tableDemo)',function(obj){
            //一旦发生工具条事件，执行的代码
            var emp = obj.data;//获取当前行数据
            var event = obj.event;//获取当前触发的layui事件值
            if(event == 'edit'){
                //打开编辑窗口
                layer.msg('开始编辑：' + emp.EMPNO);

                layer.open({
                    type :  2, //弹出层的类型  0默认的，消息框  1页面层 2iframe层 3加载层 4tips层
                    //content : '<html><head></head><body>这是手写的html页面代码</body></html>',
                    content : '${path}/emp/edit/' + emp.EMPNO,   //如果是iframe层,content可以写 url请求另外一个页面
                    id : 'editFrame', //控制弹出层的唯一标识
                    area : ['800px','600px'],   //弹出层区域  [宽、高]
                    shade : 0.5,  //遮罩层   0.6代表透明度 ，'#XXXX'是遮罩层的颜色
                    title : '修改员工'
                });

            }else if(event == 'del'){
                //删除
                layer.confirm('您确定要删除该条数据？',function(){
                   //点击确认的回调函数
                    $.ajax({
                        url : '${path}/emp/delete/' + emp.EMPNO ,
                        type : 'post',
                        dataType : 'json',
                        //请求顺利完成
                        success : function(obj){
                            if(obj.code == 0 ){
                                layer.msg('删除成功！');
                                //重新加载数据表格
                                tableIns.reload();
                            }else{
                                layer.msg('删除失败！服务器异常！');
                            }
                        },
                        //请求出现错误
                        error : function(){
                            layer.msg("服务器出问题啦！");
                        }
                    });
                });
            }
        });

        //绑定搜索的单击事件
        $('#search').click(function(){
            layer.msg('重新加载表格数据！');
            var eName = $('#eName').val();
            var magrName = $('#magrName').val();
            var dName = $('#dName').val();
            var job = $('#job').val();
            //表格重载
            tableIns.reload({
               where : {
                   //放置搜索条件
                   eName : eName,
                   job : job,
                   mgrName : magrName,
                   dName : dName
               },
                page : {
                    curr : 1       //重载表格渲染，从第一页开始
                }
            });
        });

        //新增按钮单击事件
        $('#addBtn').click(function(){
            layer.msg("弹出新增页面！");
            layer.open({
                type :  2, //弹出层的类型  0默认的，消息框  1页面层 2iframe层 3加载层 4tips层
                //content : '<html><head></head><body>这是手写的html页面代码</body></html>',
                content : '${path}/emp/add',   //如果是iframe层,content可以写 url请求另外一个页面
                id : 'addFrame', //控制弹出层的唯一标识
                area : ['800px','600px'],   //弹出层区域  [宽、高]
                shade : [0.6,'#01AAED'],  //遮罩层   0.6代表透明度 ，'#XXXX'是遮罩层的颜色
                title : '新增员工'
            });
        });

    });


</script>
</html>
